<template>
  <div>

    <div style="height:60px;padding: 0 1.2rem;" class="row container">

      <router-link :to="{ path: '/', query: {}}" class="col-2 text-left">
        <img src="../../static/img/logo.png" alt="logo" style="width:70px;">
      </router-link>
      <div class="col-4">
      </div>
      <div class="col-6 text-right"  style="padding-top:20px;">
        <button type="button" class="btn btn-light btn-sm">登录</button>
        <button type="button" class="btn btn-light btn-sm">注册</button>
      </div>
    </div>

    <ul class="nav nav-pills container" style="padding:1rem 2rem;">
      <li class="nav-item">
        <router-link class="nav-link active" :to="{ path: '/', query: {}}">常用网站</router-link>
      </li>
      
      <li class="nav-item">
        <router-link class="nav-link" :to="{ path: '/stockindex', query: {}}">大盘指数</router-link>
      </li>

      <li class="nav-item">
        <router-link class="nav-link" :to="{ path: '/news', query: {}}">财经头条</router-link>
      </li>

      <li class="nav-item">
        <router-link class="nav-link" :to="{ path: '/discuss', query: {}}">个股说说</router-link>
      </li>

      <li class="nav-item">
        <router-link class="nav-link" :to="{ path: '/plan', query: {}}">灵气策略</router-link>
      </li>
    </ul>

    <div style="height:20px;background-color:#e9ecef73"></div>

    <div class="container-fluid container" style="padding:2rem;">
      <div class="row">

        <div class="col-6 col-sm-6 col-md-4 col-lg-4 col-xl-4" v-for = "(item, index) in siteList" :index="index" :key="item.index">
          <div class="card" @click="openurl(item.url)">
            <div class="card-body">
              <!-- <h5 class="card-title"> {{item.name}} </h5> -->
              <p class="com text-right">{{ item.score }}</p>
              <p class="card-text"> {{item.name}} </p>
              <p class="des">{{ item.description }}</p>
              <div class="progress" style="height:5px;">
                <div  v-bind:style="{ width: item.score*20  + '%' }" class="progress-bar progress-bar-striped"></div>
              </div>
            </div>
          </div>
        </div>
     
      </div>
    </div>

    <!-- foot -->
    <Footer/>

  </div>
</template>

<script>
import Footer from '../components/Footer.vue'

export default {
  components: {
    Footer
  },
  data () {
    return {
      nowIndex: [],
      moreIndex: [],
      siteList: [{'name': '百度', 'url': 'https://www.baidu.com', 'description': '百度中文搜索引擎', 'score': 4.2},
        {'name': '必应', 'url': 'https://cn.bing.com', 'description': '微软新一代搜索引擎', 'score': 3.9},
        {'name': '腾讯天气', 'url': 'https://tianqi.qq.com', 'description': '全国天气', 'score': 4.3},
        {'name': '百度地图', 'url': 'https://map.baidu.com', 'description': '百度地图导航', 'score': 5.0},
        {'name': '高德地图', 'url': 'https://www.amap.com', 'description': '高德地图导航', 'score': 5.0},
        {'name': '谷歌', 'url': 'https://www.google.com', 'description': '谷歌国际搜索引擎', 'score': 4.5},
        {'name': '维基百科', 'url': 'https://en.wikipedia.org', 'description': '准确中立的百科全书', 'score': 4.7},
        {'name': '淘宝', 'url': 'https://www.taobao.com', 'description': '淘宝网购零售平台', 'score': 5.0},
        {'name': '京东', 'url': 'https://www.jd.com', 'description': '中国自营式电商平台', 'score': 4.8},
        {'name': '天猫', 'url': 'https://www.tmall.com', 'description': '淘宝plus', 'score': 3.7},
        {'name': '阿里巴巴', 'url': 'https://www.1688.com', 'description': '阿里采购批发平台', 'score': 3.5},
        {'name': '百度贴吧', 'url': 'https://tieba.baidu.com', 'description': '百度贴吧', 'score': 4.0},
        {'name': '12306', 'url': 'https://www.12306.cn', 'description': '中国铁路服务中心', 'score': 4.1},
        {'name': '新浪', 'url': 'https://www.sina.com.cn', 'description': '网络媒体', 'score': 3.3},
        {'name': '58', 'url': 'https://58.com', 'description': '分类信息网', 'score': 2.8},
        {'name': '携程', 'url': 'https://www.ctrip.com', 'description': '在线票务服务', 'score': 3.8},
        {'name': '优酷', 'url': 'https://www.youku.com/', 'description': '优酷视频平台', 'score': 3.6},
        {'name': '腾讯视频', 'url': 'https://v.qq.com/', 'description': '腾讯视频平台', 'score': 3.4},
        {'name': '爱奇艺', 'url': 'https://www.iqiyi.com/', 'description': '爱奇艺视频平台', 'score': 2.9},
        {'name': '虎牙', 'url': 'https://www.huya.com/', 'description': '虎牙直播平台', 'score': 4.2},
        {'name': '斗鱼', 'url': 'https://www.douyu.com', 'description': '斗鱼直播平台', 'score': 4.2},
        {'name': 'youtube', 'url': 'https://www.youtube.com', 'description': '谷歌视频平台', 'score': 4.8},
        {'name': 'twitch', 'url': 'https://www.twitch.tv', 'description': 'twitch直播平台', 'score': 4.8},
        {'name': 'G5', 'url': 'https://zh-cn.socialclub.rockstargames.com', 'description': '- - -', 'score': 4.0}
      ]
    }
  },
  created() {
    // this.axios.get(`${this.config.baseURL}:${this.config.port}/api/stock_index?id=now_index`).then((response) => {
    //   console.log('sdsdf', response.data.data)
    //   this.nowIndex = response.data.data
    // })
  },
  methods: {
    go () {
      this.$router.push('/moreindex')
    },
    openurl(url) {
      window.open(url+'?track=07ge.com')
    },
  // 注册
  getSite() {
    this.$axios.get('/website/siteList').then(({status,data})=>{
        if(status===200){
          if(data&&data.code === 1){
            console.log('this.middleList', data.data.favorite)
            this.middleList = data.data.favorite

            // setTimeout(()=>{
            //   this.$message.success('取出成功');
            // }, 2300)
          } else if(data&&data.code === 0) {
            this.middleList = data.data
          } else {
            // this.error=data.msg
            // this.$message.error(data.msg);
          }
        }else{
          this.error=`服务器出错`
        }
      })
    }
  }  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  /* color: #42b983; */
}
.card {
   height:170px;
   margin-bottom:2rem;
   .card-body {
     .des {
      //  height:25px;
       font-size: 10px;
       color: #bbb;
       margin: 20px 0;
     }
     .com {
       font-size: 10px;
      //  margin: 10px;
     }
   }
}
.nav-link.active {
  background-color: #409eff;
}
</style>
